<template>
    <Modal
        v-model="visible"
        transfer
        class="Dialog"
        class-name="vertical-center-modal"
        :footerHide="!$slots.footer"
        draggable
        reset-drag-position
        @on-cancel="close"
        :mask="mask"
        :mask-closable="false"
        :width="width * REM"
    >
        <!-- :draggable="true" -->
        <template slot="header">
            <span class="Dialog-title">{{ title }}</span>
        </template>
        <template>
            <slot name="content" v-if="contentVisible"></slot>
        </template>
        <template slot="footer" v-if="$slots.footer">
            <slot name="footer"></slot>
        </template>
    </Modal>
</template>

<script>
export default {
    data() {
        return {
            REM: window.REMFontSize,
            contentVisible: this.value,
            visible: this.value
        }
    },
    props: {
        width: { type: Number, default: 1200 },
        value: { type: Boolean, default: false },
        mask: { type: Boolean, default: true },
        title: { type: [String, Number], default: '' }
    },
    watch: {
        value(val) {
            this.visible = val
            if (val) {
                this.contentVisible = val
            } else {
                setTimeout(() => {
                    this.contentVisible = false
                }, 200)
            }
        }
    },
    methods: {
        close() {
            this.visible = false
            this.$emit('input', false)
            this.$emit('on-cancel')
        }
    }
}
</script>

<style lang="less">
.vertical-center-modal {
    .ivu-modal {
        top: 70rem;
        &-header {
            padding-top: 10rem;
            padding-bottom: 10rem;
        }
    }
}
</style>
